function $(a){
    return document.querySelector(a)
}

// 隐藏字数
function str(b){
    let s='';
    let length = 15;
    if(b.length>=length){
    for(let i = 0 ; i<length;i++){
        s+=b[i];
    }
    s+='...';
}else{
    for(let i = 0 ; i<b.length;i++){
        s+=b[i];
    }
}
    return  s;
}
function lunbo(){
    // 随机7张图片

    axios({
        method: 'get',
        url: '/photo'
    }).then(function(data){
        let list = data.data.data
        console.log(1111111111111111111111111111111);
        console.log(list);
        for(let i = 0 ; i<list.length ;i++){
        let photo = `<img  class="picture " src="${list[i].videoPhoto}">`
        $('.imgs').insertAdjacentHTML('afterbegin',photo)
        }
        var time = 0;
        var i=0;
        var imgall = document.querySelectorAll('.picture');
        var circleBox = document.querySelector('.circle-box');
        var picture = document.querySelectorAll('.picture');
        // 生成和图片个数相同的小圆点
            for(let i = 0; i<picture.length ; i++){
                let span = `<span index='${i}' class='cir'></span>`;
                circleBox.insertAdjacentHTML('beforeend',span);
            }
            // 鼠标移动到小圆点图片变化
            var cir=document.querySelectorAll('.cir');
            cir[0].style.backgroundColor='rgb(32, 147, 255)'
            for(let i= 0;i<cir.length;i++) {
                cir[i].onmouseover=function(){
                    // 其余的图片小圆点形式原来
                for(let j=0;j<imgall.length;j++){
                    imgall[j].classList.add('hide');
                    cir[j].style.backgroundColor='';
                }
                // 选中的小圆点图片显示
                cir[i].style.backgroundColor='rgb(32, 147, 255)';
                imgall[i].classList.remove('hide');
                time=0;
            }
        }
        // 跳转下一页
        function goNext(){
            i++;
            for(let j=0;j<imgall.length;j++){
                imgall[j].classList.add('hide');
                cir[j].style.backgroundColor=''
            }
            var a = i==imgall.length? i=0:i;
            imgall[a].classList.remove('hide');
            cir[a].style.backgroundColor='rgb(32, 147, 255)'
            time =0;
        }
        // 跳转上一页
        function goPre(){
            i--;
            for(let j=0;j<imgall.length;j++){
                imgall[j].classList.add('hide');
                cir[j].style.backgroundColor=''
            }
            var a = i<0? i=imgall.length-1:i;
            imgall[a].classList.remove('hide');
            cir[a].style.backgroundColor='rgb(32, 147, 255)'
            time = 0;
        }
        var timer = setInterval(function(){
            time++;
            if(time == 60){
                goNext();
                time = 0;
            }
        },100);
        // 上一页
        document.getElementById("goPre").onclick = function() {
                goPre();
            }
        // 下一页
        document.getElementById("goNext").onclick = function() {
                goNext();
            }

    }).catch(err=>{
        console.log(err);
    })
}
lunbo();

// 地区分类
(function(){
    axios({
        method: 'get',
        url: '/type/areaTags',
    }).then(function(data){
    var list =data.data.data.data;
    for(let i= 0;i<list.length;i++){
        document.querySelectorAll('.classnav')[0].querySelector('div').innerHTML+=` <a href="/type" style="text-decoration:none;color: block;">${list[i]}</a>`;
    }
    }).catch(err=>{
        console.log(err);
    })
})();
// 年份标签
(function(){
    axios({
        method: 'get',
        url: '/type/yearTags',
    }).then(function(data){
    var list =data.data.data.data;
    for(let i= 0;i<list.length;i++){
        document.querySelectorAll('.classnav')[2].querySelector('div').innerHTML+=` <a href="/type" style="text-decoration:none;color: block;">${list[i].replace('_','')}</a>`;
    }
    }).catch(err=>{
        console.log(err);
    })
})();




function teleplay(){
axios({
    method: 'get',
    url: '/teleplay/MoreTV',
}).then(function(data){
    $('.panel').innerHTML=''
var list =data.data.data.data;
console.log(160)
console.log(list);
for(let i = 0 ; i< list.length;i++){
    $('.panel').innerHTML+=`<li class="panel-li">
    <div class='add-panel'>
        <div class="panel-div">
            <a href="/play?${list[i].videoId}" class='aplus'>
                <img src="${list[i].videoPhoto==null?'#':list[i].videoPhoto}" alt="">
                <span class='pack-br'><span class='mod-spans'>10期全</span></span>
            </a>
        </div>
        <div class='box-list'>
            <div class='box-title'>
                <a href="/play?${list[i].videoId}">
                    <p>${list[i].videoName}</p>
                </a>
            </div>
            <div class="box-sub-title">${list[i].videoBriefly}</div>
        </div>
    </div>
    <!-- 鼠标悬停上边里面的内容会改变 -->
    <div class='hovers'>
        <div class='hover-link'>
            <a href="/play?${list[i].videoId}" class='hover-a'>
                <div class='qy-mod-hover'><img src="/publics/front-stage/img/pic1.avif" class='hover-mod-img' alt=""></div>
                <div class='qy-hover-tr'><img src="/publics/front-stage/img/self.png" alt=""></div>
            </a>
        </div>
        <div class='hover-wrap'>
            <p class="hover-main">
                <a href="/play?${list[i].videoId}" class='hover-eight'>${list[i].videoName}</a>
            </p>
            <p class='hover-sub'>类型:<span>悬疑/偶像/穿越</span></p>
            <p class='hover-play'>主演:<span>曾之乔/傅孟柏/柯桂艳</span></p>
            <p class="hover-story">${str(list[i].introduction)}</p>
        </div>
    </div>
</li> `
    // 鼠标放上去内容会改变
    var mod1 = document.getElementsByClassName('add-panel')
    var mod2 = document.getElementsByClassName('hovers')
    var modLi=document.getElementsByClassName('panel-li')
    for(let i=0,len=modLi.length;i<len;i++){
        modLi[i].addEventListener('mouseover',function(){
            mod1[i].style.display='none';
            mod2[i].style.display='block';
        })
        modLi[i].addEventListener('mouseout',function(){
            mod1[i].style.display='block';
            mod2[i].style.display='none';
        })
    }
}
}).catch(err=>{
    console.log(err);
})
}
teleplay();


